﻿
@{
    Layout = "~/Views/Shared/_VueLayout.cshtml";

}
<link href="~/jsonFormater/jsonFormater.css" rel="stylesheet" />
  <link href="/css/scrollBar.css" rel="stylesheet" />
<style>
    .jsoncontent {
        width: 40%;
        height: 100%;
        float: left;
        border: 1px solid #E5EBEE;
        margin: 0 auto;
    }

    .jsoncontent2 {
        width: 59.5%
    }

    textarea {
        height: 99.40%;
        width: 99.40%;
        color: #555;
        font-size: 17px;
        resize: none;
        border: 1px solid #E5EBEE;
    }

        textarea:focus {
            outline: none;
            border: 1px solid #C9C9C9;
            -webkit-box-shadow: 0px 0px 6px #69C5FF;
            -moz-box-shadow: 0px 0px 5px #69C5FF;
            box-shadow: 0px 0px 5px #69C5FF;
        }

        textarea:: -webkit-input-placeholder {
            /* placeholder颜色  */
            color: #aab2bd;
            /* placeholder字体大小  */
            font-size: 18px;
        }
</style>



<div style="width:100%;height:101%;" id="app">
    <div class="jsoncontent">
        <textarea placeholder="  请输JSON..." @@input="formatJson" v-model="jsonStr"></textarea>
    </div>
    <div class="jsoncontent jsoncontent2" style="overflow-y:auto;">
        <div style="margin-left: 15px;border-bottom:1px solid #E5EBEE;width:97%">
            <el-checkbox size="mini" v-model="quote" @@change="resultJson">引号</el-checkbox>
            <el-checkbox v-model="collapsible" @@change="resultJson" style="margin-left:-15px">自己折叠</el-checkbox>
            &nbsp; &nbsp;
            <el-button type="text" @@click="fold(true)">折叠</el-button>
            <el-button type="text" @@click="fold(false)">展开</el-button>
            @*<el-button type="text" @@click="SelectAllClicked()">复制</el-button>*@
            <span style="color:#E5EBEE"> &nbsp;|&nbsp;</span>
            <el-button type="text" @@click="Compress()">压缩</el-button>
            <el-button type="text" @@click="Vary()">转义</el-button>
            <el-button type="text" @@click="RemoveVary()">去转义</el-button>
            <el-button type="text" @@click="GenerateEntity()">生成实体</el-button>
            <span style="color:#E5EBEE"> &nbsp;|&nbsp;</span>
            <el-button type="text" @@click="SelectAllClicked()">复制<i class="el-icon-tickets el-icon--right"></i></el-button>
            @*<el-button size="mini"  style="border:#409EFF 1px  solid" icon="el-icon-tickets " @@click="SelectAllClicked()"  round>复制</el-button>*@
            <span style="font-size:12px;color:#AAAA;float:right;margin-top:13px">击可进行编辑</span>
        </div>
        <div id="Canvas" class="Canvas" style="overflow-y:auto;"> </div>
    </div>
    <div class="jsoncontent" style="display:none">
        <textarea placeholder=" 编辑补充..." @@input="editJson" style="font-weight: bold" v-model="editJsonStr"></textarea>
    </div>
    <el-dialog  :visible.sync="dialog"
               width="800px">
        <template v-slot:title style="font-size:18px">
            c#实体 <el-checkbox size="mini" v-model="showSummary" @@change="GenerateEntity" style="float:right;font-size:10px" >注释</el-checkbox>
        </template>
        <div  id="ec_div"  style="height:500px;overflow:auto" contenteditable="true"></div>
    </el-dialog>
</div>



<script src="~/jsonFormater/jsonFormater.js"></script>
<script>
var vueApp = undefined;
var vm = new Vue({
    el: '#app',
    data: function () {
        vueApp = this;
        return {
            jsonStr: undefined,
            editJsonStr: undefined,
            resultJsonStr: undefined,
            collapsible: true,
            quote: true,
            dialog: false,
            showSummary: false
        };
    },
    filters: {

    },
    created() {
        this.initialization();
    },
    mounted() {
        
    },
    methods: {
        initialization() {
            var options = {
                dom: document.getElementById('Canvas'),
                isCollapsible: vueApp.collapsible,   //折叠
                quoteKeys: vueApp.quote, //引用
                tabSize: 2
            };
            window.jf = new JsonFormatter(options);
        },
        formatJson() {
            try {

                vueApp.editJsonStr = JSON.stringify(JSON.parse(vueApp.jsonStr), null, 4);
                vueApp.resultJsonStr = vueApp.editJsonStr;
                this.resultJson();

            } catch (e) {
                document.getElementById('Canvas').innerHTML = "<pre  style='font-size:15px;color:#F3592A' >" + e + "</span>";
            }

        },
        editJson() {
            try {
                vueApp.resultJsonStr = JSON.stringify(JSON.parse(vueApp.editJsonStr), null, 4);
                this.resultJson();
            } catch (e) {

            }
        },
        //开始渲染
        resultJson() {
            this.initialization();
            if (vueApp.resultJsonStr != undefined) {
                jf.doFormat(vueApp.resultJsonStr);
            }
        },
        //展开折叠
        fold(val) {
            if (vueApp.resultJsonStr != undefined) {
                if (val) {
                    window.jf.collapseAll();
                } else {
                    window.jf.expandAll();
                }
            }

        },
        //复制
        SelectAllClicked() {

            if (!!document.selection && !!document.selection.empty) {

                document.selection.empty();

            } else if (window.getSelection) {

                var sel = window.getSelection();

                if (sel.removeAllRanges) {

                    window.getSelection().removeAllRanges();
                }

            }
            var range = (!!document.body && !!document.body.createTextRange) ? document.body.createTextRange() : document.createRange();

            if (!!range.selectNode) {
                range.selectNode(document.getElementById('Canvas'));
            }
            else if (range.moveToElementText) {
                range.moveToElementText(document.getElementById('Canvas'));
            }


            if (!!range.select) {
                range.select(document.getElementById('Canvas'));
            } else {
                window.getSelection().addRange(range);
            }
            document.execCommand("Copy");


        },
        //压缩
        Compress() {
            window.jf.options.isCollapsible = false;
            var html;
            var obj = eval("[" + vueApp.jsonStr + "]");
            html = jf.ProcessObject(obj[0], 0, false, false, false);
            this.SetresultJson(html);
        },
        //转义
        Vary() {
            try {
                let html;
                var obj = eval("[" + vueApp.jsonStr + "]");
                html = jf.ProcessObject(obj[0], 0, false, false, false);
                html = html.replace(/"/g, '\\"');
                this.SetresultJson(html);
            } catch (e) {
                document.getElementById('Canvas').innerHTML = "<pre  style='font-size:15px;color:#F3592A' >" + e + "</span>";
            }

        },
        RemoveVary() {
            try {
                let html;
                var jsonStr = vueApp.jsonStr.replace(/\\/g, '');



                vueApp.editJsonStr = JSON.stringify(JSON.parse(jsonStr), null, 4);
                vueApp.resultJsonStr = vueApp.editJsonStr;
                this.resultJson();
            } catch (e) {
                document.getElementById('Canvas').innerHTML = "<pre  style='font-size:15px;color:#F3592A' >" + e + "</span>";
            }
        },
        GenerateEntity()
        {
            vueApp.dialog = true;
            this.$nextTick(function () {
                if (vueApp.resultJsonStr != null) {
                    jf.options.allClass = [];
                    jf.GetenClassCode(JSON.parse(vueApp.resultJsonStr), 'Entity', vueApp.showSummary);
                    var html="";
                    var val = jf.options.allClass;
                    for (var i = (val.length-1); i >= 0; i--){
                        html += val[i];
                    }
                    document.querySelector("#ec_div").innerHTML = html;
                }
              
            });
           
        },
        //给展示的div赋值
        SetresultJson(html) {
            try {

                document.getElementById('Canvas').innerHTML = "<span  style='font-size:15px' >" + html + "</span>";
            } catch (e) {
                document.getElementById('Canvas').innerHTML = "<span  style='font-size:12px;color:#F3592A' >" + e + "</span>";
            }
        }


    }
});
</script>
